<!-- 行情 -->
<template>
  <div>
    <my-header title="行情" :showBack="false">
      <span slot="right" @click="pushPath('/coinSearch')" class="iconfont icon-search header_search"></span>
    </my-header>
    <div class="quotation">
      <ol class="area_box">
        <li v-for="(item,index) in areaArr" :class="{'area_selected':areaSelected==index}" @click="areaSelected=index">{{item}}</li>
      </ol>

      <div :offset-top="86">
        <ol class="main_coin_box">
          <li v-for="(item,index) in mainCoinArr" @click="mainCoinSelected=index">
            <p :class="{'main_coin_selected':mainCoinSelected==index}">{{item}}</p>
          </li>
        </ol>
        <ol class="coin_list_header">
          <li>
            <span>名称</span>
          </li>
          <li>
            <span>最新价</span>
          </li>
          <li>
            <span>涨跌幅</span>
          </li>
        </ol>
      </div>

      <ol class="list_box" v-if="areaSelected==0">
        <li v-for="item in allCoinList" v-if="item.maincoin==mainCoinArr[mainCoinSelected]" @click="goDetails(item)">
          <div>
            <label>
              <p>{{item.tradcoin}} <i>/ {{item.maincoin}}</i></p>
              <p>{{item.price}}</p>
            </label>
            <label>
              <span>24H量{{item.number|mathFloor(0)}}</span>
              <span>￥{{item.cny|mathFloor(2)}}</span>
            </label>
          </div>
          <section :class="[item.rise>=0?'green_bg':'red_bg','text_hide']"><em v-if="item.rise>0">+</em>{{item.rise*100}}%</section>
        </li>
        <div class="no_data">
          <p class="icon_no_data"></p>
          <span>暂无数据</span>
        </div>
      </ol>
      <ol class="list_box" v-if="areaSelected==1">
        <li v-for="item in allCoinList" v-if="item.plate=='main'&&item.maincoin==mainCoinArr[mainCoinSelected]" @click="goDetails(item)">
          <div>
            <label>
              <p>{{item.tradcoin}} <i>/ {{item.maincoin}}</i></p>
              <p>{{item.price}}</p>
            </label>
            <label>
              <span>24H量{{item.number|mathFloor(0)}}</span>
              <span>￥{{item.cny|mathFloor(2)}}</span>
            </label>
          </div>
          <section :class="[item.rise>=0?'green_bg':'red_bg','text_hide']"><em v-if="item.rise>0">+</em>{{item.rise*100}}%</section>
        </li>
        <div class="no_data">
          <p class="icon_no_data"></p>
          <span>暂无数据</span>
        </div>
      </ol>
      <ol class="list_box" v-if="areaSelected==2">
        <li v-for="item in allCoinList" v-if="item.plate=='pioneer'&&item.maincoin==mainCoinArr[mainCoinSelected]" @click="goDetails(item)">
          <div>
            <label>
              <p>{{item.tradcoin}} <i>/ {{item.maincoin}}</i></p>
              <p>{{item.price}}</p>
            </label>
            <label>
              <span>24H量{{item.number|mathFloor(0)}}</span>
              <span>￥{{item.cny|mathFloor(2)}}</span>
            </label>
          </div>
          <section :class="[item.rise>=0?'green_bg':'red_bg','text_hide']"><em v-if="item.rise>0">+</em>{{item.rise*100}}%</section>
        </li>
        <div class="no_data">
          <p class="icon_no_data"></p>
          <span>暂无数据</span>
        </div>
      </ol>
      <ol class="list_box" v-if="areaSelected==3">
        <li v-for="item in allCoinList" v-if="item.isOptional&&item.maincoin==mainCoinArr[mainCoinSelected]" @click="goDetails(item)">
          <div>
            <label>
              <p>{{item.tradcoin}} <i>/ {{item.maincoin}}</i></p>
              <p>{{item.price}}</p>
            </label>
            <label>
              <span>24H量{{item.number|mathFloor(0)}}</span>
              <span>￥{{item.cny|mathFloor(2)}}</span>
            </label>
          </div>
          <section :class="[item.rise>=0?'green_bg':'red_bg','text_hide']"><em v-if="item.rise>0">+</em>{{item.rise*100}}%</section>
        </li>
        <div class="no_data">
          <p class="icon_no_data"></p>
          <span>暂无数据</span>
        </div>
      </ol>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      areaSelected:sessionStorage.getItem('areaSelected')||0,
      areaArr:['全部','主板','创业板','自选'],

      mainCoinSelected:sessionStorage.getItem('mainCoinSelected')||0,
      mainCoinArr:[],

      allCoinList:[],

      websocket:null
    };
  },
  computed: {},
  watch: {
    areaSelected(val){
      sessionStorage.setItem('areaSelected',val)
    },
    mainCoinSelected(val){
      sessionStorage.setItem('mainCoinSelected',val)
    }
  },
  destroyed(){
    this.websocket.close();
  },
  created() {
    this.$store.commit("updateNeedShowFooter", true);
    this.$store.commit("updateSelected", 1);
  },
  mounted() {
    this.getSymbols();
  },
  methods: {
    getSymbols(){
      this.request(this.api.symbols).then(res => {
        if(res.code==0){
          this.initWebSocket();
          this.processData(res.data);
        }
      })
    },
    //加工行情数据
    processData(coinData){
      let mainCoinLength = this.mainCoinArr.length;
      let optionalData = JSON.parse(localStorage.getItem('optionalData'))||[];
      coinData.forEach(data=>{
        optionalData.forEach(item=>{
          if(data.tradcoin==item.tradcoin&&data.maincoin==item.maincoin){
            data.isOptional = true;
          }
        })
        if(mainCoinLength==0){
          if(!this.mainCoinArr.includes(data.maincoin)){
            this.mainCoinArr.push(data.maincoin)
          }
        }
      })
      this.allCoinList = coinData;
    },
    goDetails(data){
      sessionStorage.setItem('quotationDetails',JSON.stringify(data));
      this.pushPath('/quotationDetails')
    },

    initWebSocket(){ //初始化 
      let userNo = new Date().getTime() + Math.floor(Math.random()*1000 + 1);
      this.websocket = new WebSocket(`${this.api.socketUrl}/ws/symbols/${userNo}`);
      this.websocket.onopen = () =>{
        console.log("WebSocket连接成功");
      };
      this.websocket.onmessage = (res)=>{ //数据接收  
        //处理逻辑
        let data = JSON.parse(res.data)
        
        this.processData(data.symbols);
      }
      this.websocket.onerror = (e) =>{ //错误
        console.log(e);
        console.log("WebSocket连接发生错误");
      };
    },
    
  },
}
</script>
<style lang='scss' scoped>
.header_search{
  font-size: 36px;
  padding: 5px;
}
.quotation{
  bottom: 86px!important;
}
.area_box{
  margin: 10px 30px;
  display: flex;
  align-items: center;
  border: 1px solid;
  height: calc(7vw + 2px);
  li{
    flex: 1;
    text-align: center;
    line-height: 7vw;
    font-size: 22px;
    border-right: 1px solid;
    &:last-child{
      border-right: none;
    }
  }
  .area_selected{
    color: #fff!important;
    border-radius: 2px;
  }
}
.main_coin_box{
  position: relative;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid;
  li{
    padding: 0 30px;
    text-align: center;
    font-size: 24px;
    p{
      position: relative;
      display: block;
      padding: 20px 0 16px;
    }
    .main_coin_selected{ 
      &::after{
        content: '';
        position: absolute;
        width: 100%;
        left:0;
        bottom: 0;
        height: 2px;
        z-index: 10;
      }
    }
  }
}

.coin_list_header{
  margin-top: -1px;
  padding: 16px 30px;
  display: flex;
  align-items: center;
  li{
    flex: 1;
    font-size: 20px;
    &:nth-child(3){
      max-width: 140px;
      text-align: right;
    }
  }
}

.list_box{
  li{
    padding: 20px 30px;
    display: flex;
    border-bottom: 1px solid;
    div{
      flex: 1;
      line-height: 30px;
      label{
        overflow: hidden;
        display: block;
        &:nth-child(2){
          margin-top: 4px;
        }
        p{
          width: 50%;
          float: left;
          font-size: 24px;
          font-weight: 900;
          i{
            font-size: 20px;
            font-weight: normal;
          }
        }
        span{
          display: block;
          float: left;
          width: 50%;
          font-size: 20px;
        }
      }
    }
    section{
      flex: 1;
      max-width: 140px;
      line-height: 60px;
      height: 60px;
      font-size: 26px;
      color: #fff;
      border-radius: 4px;
      text-align: center;
    }
  }
  li+div{  //骚操作  有li元素就说明列表筛选有数据，就隐藏暂无数据，无li 则此css不得应用
    display: none;
  }
}
</style>